<template>
  <el-dialog
    v-if="showAuthorityDialog"
    v-model="showAuthorityDialog"
    title="页面权限管理"
    width="40%"
  >
    <div v-if="jur.userName === '管理员'" class="checkbox-group">
      <el-checkbox-group
        v-model="checkedPages"
        @change="handleCheckedPagesUpdate"
      >
        <el-checkbox
          v-for="page in pageList"
          :key="page.path"
          :label="page.name"
          :disabled="page.disabled"
          class="checkbox-item"
        />
      </el-checkbox-group>
    </div>
    <div v-else class="page-list">
      <div v-for="page in pageList" :key="page.path" class="page-item">
        {{ page.name }}
      </div>
    </div>
    <template #footer v-if="jur.userName === '管理员'">
      <el-button type="primary" @click="showAuthorityDialog = false"
        >取消</el-button
      >
      <el-button type="primary" @click="handleConfirm(checkedPages)">
        确认
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { jurisdiction } from "@/store";
interface Page {
  path: string;
  name: string;
  disabled?: boolean;
}
const props = defineProps({
  pageList: {
    type: Array as () => Page[],
    default: () => [],
  },
  userRole: {
    type: String,
    default: "police",
  },
  value: {
    type: Array,
    default: () => [],
  },
});
const jur = jurisdiction();
const showAuthorityDialog = ref(false);
const checkedPages = ref();

const handleCheckedPagesUpdate = (newChecked) => {
  checkedPages.value = newChecked;
};

const emit = defineEmits(["confirm"]);

const handleConfirm = (selectedPages) => {
  // emit('input', selectedPages)
  emit("confirm", selectedPages);
  showAuthorityDialog.value = false;
};

watch(
  () => props.value,
  (newVal) => {
    checkedPages.value = newVal;
  },
  { immediate: true }
);

watch(
  () => props.pageList,
  (newVal) => {
    checkedPages.value = newVal.filter((p) => !p.disabled).map((p) => p.path);
  },
  { immediate: true }
);

defineExpose({
  showAuthorityDialog,
});
</script>

<style lang="less" scoped>
:deep(.el-checkbox__input.is-disabled + span.el-checkbox__label) {
  color: black;
}
.el-button {
  &.el-button--primary {
    border: none !important; /* 移除边框 */
    background: url("@/assets/img/button-bgImg.png") center/cover no-repeat !important;
    color: #fff !important; /* 确保文字可见 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 105px;

    /* 移除Element默认的hover/active效果 */
    &:hover,
    &:active,
    &:focus {
      background: url("@/assets/img/button-bgImg.png") center/cover no-repeat !important;
      opacity: 0.9; /* 添加悬停效果 */
    }

    /* 如果图片有透明区域，添加备用背景色 */
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff0;
      z-index: -1;
    }
  }
}
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 30px;
  background: #687d8e1f;
  padding: 10px;
  border-radius: 10px;
}
.page-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 15px;
}
.page-item {
  color: #fff;
  font-size: 14px;
}
.checkbox-item {
  margin: 5px;
  color: #e2e1e1;
}

.el-button {
  &.el-button--primary {
    border: none !important; /* 移除边框 */
    background: url("@/assets/img/button-bgImg.png") center/cover no-repeat !important;
    color: #fff !important; /* 确保文字可见 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 105px;

    /* 移除Element默认的hover/active效果 */
    &:hover,
    &:active,
    &:focus {
      background: url("@/assets/img/button-bgImg.png") center/cover no-repeat !important;
      opacity: 0.9; /* 添加悬停效果 */
    }

    /* 如果图片有透明区域，添加备用背景色 */
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff0;
      z-index: -1;
    }
  }
}
</style>

<style lang="less" scoped>
.el-dialog {
  background-color: #00313799 !important; //#09223e4d !important;
  backdrop-filter: blur(1px);
  color: white;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("@/assets/img/dashboard/bgaa01.png");
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: -1;
  }
  .el-dialog__title,
  .el-dialog--center .el-dialog__body {
    color: white;
  }
}
</style>
